import { Line } from '@ant-design/plots';
import React from 'react';
import { useEffect, useState } from 'react'
import axios from 'axios';

// const DemoLine = () => {
//   // State for the data, loading status, and error handling
//   const [data, setData] = useState([]);
//   const [loading, setLoading] = useState(true);
//   const [error, setError] = useState(null);

//   // Fetch data from the backend API
//   useEffect(() => {
//       const fetchData = async () => {
//           try {
//               // Replace the URL with your actual API endpoint
//               const response = await axios.get('http://127.0.0.1:8080/product/sales/summary',{
//                 headers: {
//                     'Content-Type': 'application/json',
//                     'Authorization':localStorage.getItem('token'),
//                 },
//                 params: {},
//               });
//               // Transform the data if necessary
//               const transformedData = transformData(response.data);
//               // Set the transformed data
//               setData(transformedData);
//           } catch (error) {
//               // Set error if something goes wrong
//               setError(error);
//           } finally {
//               // Set loading to false once the request completes
//               setLoading(false);
//           }
//       };

//       fetchData();
//   }, []);
//    // Function to transform API data to the expected format
//    const transformData = (apiData) => {
//     return apiData.map(item => ({
//         year: item.year, // Adjust this according to your API response
//         value: item.value, // Adjust this according to your API response
//     }));
// };
//     const config = {
//         data,
//         xField: 'year',
//         yField: 'value',
//         point: {
//             shapeField: 'square',
//             sizeField: 4,
//         },
//         interaction: {
//             tooltip: {
//                 marker: false,
//             },
//         },
//         style: {
//             lineWidth: 2,
//         },
//     };
//     return (
//         <div> <Line {...config} /></div>
//     );
// };

const DemoLine = () => {
    const data = [
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 6 },
        { year: '1997', value: 7 },
        { year: '1998', value: 9 },
        { year: '1999', value: 13 },
    ];
    const config = {
        data,
        xField: 'year',
        yField: 'value',
        point: {
            shapeField: 'square',
            sizeField: 4,
        },
        interaction: {
            tooltip: {
                marker: false,
            },
        },
        style: {
            lineWidth: 2,
        },
    };
    return <Line {...config} />;
};

export default DemoLine;


